<template>
	<view class="cancel">
		<view class="vipcancel">
			<view class="vipcancel-vip">
				<view class="vipcancel-vip-left">
					<image class="logo " :src="user.avatar"></image>
					<view  class="jiesao">
						<view class="nickname">{{user.nickname}}</view>
						<view class="vip vip1" v-if="user.vip_id==2">银卡会员</view>
						<view class="vip vip2" v-if="user.vip_id==3">金卡会员</view>
						<view class="vip vip3" v-if="user.vip_id==4">黑金会员</view>
					</view>
				</view>
				
				<view class="vipcancel-vip-flex">
					<view class="vipcancel-vip-flex-1">
						<view class="vipcancel-vip-flex-1-f">{{user.countmoney}}</view>
						<view class="vipcancel-vip-flex-1-f1">消费金额</view>
					</view>
					<view class="vipcancel-vip-flex-2"> 
						<view  class="vipcancel-vip-flex-1-f">{{user.score}}</view>
						<view class="vipcancel-vip-flex-1-f1">剩余积分</view>
					</view>
				</view>
			</view>
			<view class="vipcancel-body">
				<view class="vipcancel-body-view">
					<view class="vipcancel-body-view-title">消费获得积分</view>
					<view class="vipcancel-body-view-view">
						<view class="vipcancel-body-view-view-left">￥</view>
						<view class="vipcancel-body-view-view-right">
							<input  @input="inputChange" type="number" placeholder="请输入消费金额"/>
						</view>
					</view>
					<view class="vipcancel-body-view-view1" v-if="integral>0">可获得<text>{{integral}}</text>积分</view>
					<view class="vipcancel-body-view-view1" v-if="zekou>0">打折后可价格是<text>{{zekou}}</text>元</view>
				</view>
				<view class="vipcancel-body-buttom" @click="buttomClick()">确认消费</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				exchange : 1,
				integral : 0,
				money    : 0,
				user_id  : '',
				zekou    : 0,
				user     : []
			}
		},
		onLoad(e) {
			this.user_id  = e.user_id;
			this.getall();
		},
		methods: {
			buttomClick(){
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定要操作吗？',
				    success: function (res) {
				        if (res.confirm) {
							that.$api.recordsetadd({'user_id':that.user_id,'money':that.money}).then(res=>{
								uni.showToast({
									title: res.msg,
									icon: "none"
								});
								if(res.code == 1){
									that.money = '';
									that.getall()
								}
							})
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				            // 用户点击了取消按钮的相关逻辑可以放在这里
				        }
				    }
				});
			},
			inputChange(e){
				let that  = this;
				that.integral =Number(that.exchange) * Number(e.target.value);
				this.zekou    = (that.user.vip.discount * Number(e.target.value)).toFixed(2);
				that.money    = e.target.value;
				console.log(this.zekou);
			},
			getall(){
				let that  = this;
				console.log(that.user_id);
				
				that.$api.userinfo({'user_id':that.user_id}).then(res=>{
					that.user  = res.data.user;
				})
			}
		}
	}
</script>

<style lang="less">
	.cancel {
		width: 100%;
		height: 100%;
		background-color: #f0f0f0;
		color: #333;
	}
	.vipcancel {
		width: 750rpx;
		height: 480rpx;
		background-image: url('../../static/vip/bag.png');
		background-size: 100%;
		.vipcancel-vip {
			background-color: #fff;
			width: 580rpx;
			margin: auto;
			height: 230rpx;
			position: relative;
			top: 30rpx;
			border-radius: 20rpx;
			padding: 40rpx;
			.vipcancel-vip-left {
				display:flex;
				.logo {
					width: 120rpx;
					height: 120rpx;
					border: 4rpx solid #f7756c;
					border-radius: 50%;
				}
				.jiesao {
					padding-left: 20rpx;
					.nickname {
						font-size: 38rpx;
					}
					.vip {
						font-size: 34rpx;
						margin-top: 14rpx;
						padding-left: 16rpx;
						padding-right: 16rpx;
						line-height: 50rpx;
						border-radius: 36rpx;
					}
					.vip1 {
						background-image:linear-gradient(#dbdfeb,#e3ebf3);
						color:#555d6e;
					}
					.vip2 {
						background-image:linear-gradient(to right,#f3d39a,#f7dfb5);
						color:#a36a09;
					}
					.vip3{
						background-image:linear-gradient(to right,#0d0b0b,#454546);
						color:#ffe3cf;
					}
				}
				
			}
			.vipcancel-vip-flex {
				display: flex;
				margin-top: 20rpx;
				justify-content: center;
				text-align: center;
				.vipcancel-vip-flex-1 {
					flex: 1;
				}
				.vipcancel-vip-flex-2 {
					flex: 1;
				}
				.vipcancel-vip-flex-1-f {
					font-size: 40rpx;
					font-weight: bold;
				}
				.vipcancel-vip-flex-1-f1 {
					font-size: 28rpx;
					color: #9d9d9d;
				}
			}
		}
		.vipcancel-body {
			background-color: #fff;
			width: 580rpx;
			margin: auto;
			height: 540rpx;
			margin-top: 80rpx;
			border-radius: 20rpx;
			padding: 40rpx;
			.vipcancel-body-view-title {
				font-weight: bold;
			}
			.vipcancel-body-view-view {
				display: flex;
				padding-bottom: 40rpx;
				padding-top: 60rpx;
				border-bottom: 2rpx solid #e8e8e8;
				.vipcancel-body-view-view-left {
					font-size: 54rpx;
					font-weight: bold;
				}
				.vipcancel-body-view-view-right {
					margin-left: 20rpx;
					input {
						font-size: 38rpx;
						height: 66rpx;
						padding-top: 4rpx;
					}
				}
			}
			.vipcancel-body-view-view1 {
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				text {
					padding-left: 8rpx;
					padding-right: 8rpx;
					color: #f7756c;
				}
			}
			.vipcancel-body-buttom {
				width: 540rpx;
				line-height: 90rpx;
				background-color: #f7756c;
				text-align: center;
				margin: auto;
				color: #fff;
				border-radius: 20rpx;
				margin-top: 50rpx;
			}
		}
	}
</style>